<template>
  <div>
    <h3>GrandSon组件 孙子组件 {{ pocketMoney }}</h3>
    <button @click="buyToys">孙子花钱买玩具了~</button>
  </div>
</template>

<script>
import {inject, provide} from "vue";
import {getRandomInt} from "../util/tool";
import emitter from "../util/mitt";

export default {
  name: "GrandSon",
  setup() {
    // 接收祖先组件提供的数据
    const pocketMoney = inject('money');
    // 接收祖先提供的改变金额的方法
    const changeMoney = inject('changeMoney');

    const buyToys = () => {
      // 买玩具所花的钱
      const money = getRandomInt(50, 150);
      console.log(`孙子买了一个玩具, 花了${money}元`)
      // 孙组件消费了, 通知父组件APP.vue组件, 进行修改
      // 不能自己修改数据, 遵循单向数据流原则, 数据谁定义谁修改
      // context.emit('update:pocketMoney', pocketMoney - money)
      // provide('money', pocketMoney - money)
      changeMoney(money)

      // 通过事件中心发出一个自定义事件
      emitter.emit('getMoney', {name: 'hliushi'})
    }

    return {
      pocketMoney,
      buyToys
    }
  }
}
</script>

<style scoped>

</style>
